<template>
	<view class="s-page-wrapper is-100vh">
		<view class="is-33vh has-mgt-10">
			<view class="is-flex is-column is-justify-center  is-align-center is-height-100">
				<image src="../../static/img/common/logo.jpg" mode="aspectFit" class="logoimg"></image>
				<text class="t-welcome">找回密码</text>
			</view>
		</view>
		<view class="content">
			<view class="has-mglr-10 ">
				<view class=" has-mgtb-10 ">
					<input type="number" v-model="phone" maxlength="11" placeholder="手机号" class="is-input1 is-size-18" />
				</view>
				<view class=" has-mgtb-10 ">
					<input type="number" v-model="code" maxlength="6" placeholder="请输入验证码" class="is-input1" />
					<view class="codeimg is-blue" @tap="getsmscode">{{smsbtn.text}}</view>
				</view>
				<view class=" loginbtn has-radius has-mgtb-20">
					<button type="primary" @tap="setin">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>	
	export default {
		data() {
			return {
				phone:'',
				code:'',
				smsbtn: {
					text: '获取验证码',
					status: false,
					codeTime: 180,
				},
				timerId: null,
				userinfo:[]
			};
		},
		onLoad() {
			let phones = uni.getStorageSync('loginphone');
			//console.log(phones)
			if(phones){
				this.phone = phones; 
			}
		},
		methods: {
			getsmscode: function() {
				if (this.smsbtn.status == true ) {
					uni.showToast({
						title:'别着急！短信已经发送了~',
						icon:'none',
						mask:true
					})
					//console.log('message：', "别着急！短信已经发送了~");
					return false;
				}
				this.service.foxsendyzm(this,this.phone);
			},
			setin() {
				uni.request({
					url:this.service.FOX_URL+'diamond/checkyzm',
					method:'POST',
					data: {
						user_tel: this.phone,
						code: this.code
					},
					dataType:'json',
					header:{
						'content-type':'application/x-www-form-urlencoded',
					},
					success: res => {
						var rest = JSON.stringify(res);
						console.log(res)
						var rest = res.data;
						if(rest.status == 'error'){
							uni.showToast({
								title:rest.msg,
								icon:'none',
								mask:true
							})
						}else if(rest.status == 'success'){
							this.userinfo = rest.msg;
							const data = {
							    foxtel: this.phone,
							    foxcode: this.code,
								foxtoken: this.userinfo['user_key'],
							    foxactive: true
							}
							uni.clearStorageSync();
							this.service.addfox(data);
							uni.navigateTo({
								url:'../index/index'
							})
						}else if(rest.status == 'password'){
							this.userinfo = rest.msg;
							const data = {
							    foxtel: this.phone,
							    foxcode: this.code,
								foxtoken: this.userinfo['user_key'],
							    foxactive: true
							}
							uni.clearStorageSync();
							this.service.addfox(data);
							uni.reLaunch({
								url:'./set_password'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	page {
		min-height: 100%;
		background-color: #FFFFFF;
	}

	.content {
		width: 85%;
		margin: 0 auto;
	}

	.logoimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.is-input1 {
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		padding: 12rpx;
		color: #353535;
		font-size: 32rpx;
		box-sizing: border-box;
		appearance: none;
		border-bottom: 1rpx solid #e5e5e5;
		box-shadow: none;
		outline: 0;
		display: block;
		padding-left: 30rpx;
		margin: 0;
		font-family: inherit;
		background: #fff;
		resize: none;
	}

	.iconfont {
		position: absolute;
		font-size: 40rpx;
		right: 12%;
		z-index: 999;
		width: 105rpx;
		text-align: center;
		color: #353535;
		margin-top: -11%;
		background: #fff;
		border-top-right-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.codeimg {
		position: absolute;
		font-size: 28rpx;
		right: 12%;
		z-index: 999;
		width: 200rpx;
		text-align: center;
		color: #353535;
		margin-top: -11%;
		background: #fff;
		height: 60rpx;
		line-height: 60rpx;
		border:1px solid #DDDDDD;
	}

	.loginbtn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #0084ff;
		opacity: 0.8;
	}

	button:after {
		border: 2rpx solid #f2f2f2;
	}
	
	.t-welcome{
		font-weight: bold;
	}
</style>
